<template>
    <div class="gs-receive">
        <el-row class="hhh">
            <el-col :span="4">
                <el-row>
                    <el-col :span="8" style="text-align: center">
                        <img src="/src/assets/icon/svg/办公用品申领%20icon_3-02.svg" style="width: 40px;position: relative;top: 2px;">
                    </el-col>
                    <el-col :span="16">
                        办公用品领用台账
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="4" :offset="16">
                <el-button type="primary" @click="office" color="rgb(45,183,245)" style="border-radius: 0;font-size: 14px">办公用品申请</el-button>
            </el-col>
        </el-row>
        <el-row class="bbb">
            <el-col :span="5">
                <el-row>
                    <el-col :span="8" style="text-indent: 10px">申请人：</el-col>
                    <el-col :span="16">
                        <el-select-v2 :options="options" v-model="search.empName" placeholder="选择人员" @change="applicantChange"
                                      clearable/>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="5">
                <el-row>
                    <el-col :span="8" style="text-indent: 10px">申请部门：</el-col>
                    <el-col :span="16">
                        <el-select-v2 v-model="search.deptName" :options="options_1" clearable placeholder="选择部门" @change="applicantChange"/>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row class="statis">
            <el-col :span="4">
                <el-row>
                    <el-col :span="18">
                        <el-row class="jjjj">本月领用次数</el-row>
                        <el-row class="kkkk">999</el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-icon size="40px" class="wwww">
                            <document-copy />
                        </el-icon>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="4" class="item">
                <el-row>
                    <el-col :span="18">
                        <el-row class="jjjj">电脑领用总次数</el-row>
                        <el-row class="kkkk">999</el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-icon size="40px" class="wwww">
                            <document-copy />
                        </el-icon>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="4" class="item">
                <el-row>
                    <el-col :span="18">
                        <el-row class="jjjj">其他物品领用次数</el-row>
                        <el-row class="kkkk">999</el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-icon size="40px" class="wwww">
                            <document-copy />
                        </el-icon>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="4" class="item">
                <el-row>
                    <el-col :span="18">
                        <el-row class="jjjj">库存数量:</el-row>
                        <el-row class="kkkk">999</el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-icon size="40px" class="wwww">
                            <document-copy />
                        </el-icon>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <div class="table-list">
            <el-table :data="tableData" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column type="expand">
                    <template #default="props">
                        <el-table
                            :scrollbar-always-on="false"
                            ref="singleTable"
                            :data="props.row.gsPyDetailList"
                            highlight-current-row
                            :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
                            @current-change="handleCurrentChange"
                            style="width: 100%;padding-left: 30px;box-sizing: border-box">
                            <!--            <el-table-column type="index" width="50"> </el-table-column>-->
                            <el-table-column property="id" label="商品编号" width="120"/>
                            <el-table-column property="gsName" label="物品名称" />
                            <el-table-column property="spec" label="物品规格"/>
                            <el-table-column property="num" label="数量" width="100"/>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="编号" prop="id" width="60" v-if="show" type="index"/>
<!--                <el-table-column label="流程编号" prop="processCode"  />-->
                <el-table-column label="申请人" prop="emp.empName"/>
                <el-table-column label="所在部门" prop="dept.deptName" />
                <el-table-column label="申请日期" prop="createTime" />
                <el-table-column label="申请原因" prop="cause" show-overflow-tooltip/>
                <!--      <el-table-column label="使用原因" prop="remark"  width="120" show-overflow-tooltip> </el-table-column>-->
                <el-table-column label="当前状态" prop="status">
                  <template #default="e">
                    <template v-if="e.row.status===0">
                      <el-tag type="warning" >待审批</el-tag>
                    </template>
                    <template v-if="e.row.status===1">
                      <el-tag>已同意</el-tag>
                    </template>
                    <template v-if="e.row.status===2">
                      <el-tag type="danger" >不同意</el-tag>
                    </template>
                  </template>

                </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <template v-if="scope.row.status ===0">
                    <el-button size="mini" @click="handleEdit(scope.row,1)" type="primary" plain>同意</el-button>
                    <el-button size="mini" @click="handleDelete( scope.row,2)" type="danger" plain>不同意</el-button>
                  </template>
                </template>
              </el-table-column>
            </el-table>
            <el-row>
                <el-col :span="8" :offset="16">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-size="paging.pageSize"
                        layout="prev, pager, next,jumper"
                        :total="paging.total"
                        style="float: right"
                        background
                    >
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {defineComponent, getCurrentInstance, reactive, ref, toRefs} from 'vue'
import {getOfficePagInfo, selectEmp, updateStatuswupi} from "../../../../network/adm/office";
import {getDeptOptions} from "../../../../network/sys/dept";

export default defineComponent({
  data() {
    return {
      show:true,
      checkList: [],
      dialogVisible: false,
      options: [],
      options_1: [],
      options_2:[
        {
          value:'消耗品',
          label:'消耗品'
        },
        {
          value:'耐用品',
          label:'耐用品'
        }
      ],
      tableData: [],
      search:{
        empName: null,
        deptName: null,
      },
      paging:{
        pageSize:7,
        pageNum:1,
        total: 0
      },
      multipleSelection: [],
    }
  },
  components: {},
  props: {},
  setup() {
    const state = reactive({

    })
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs['vForm'].validate(valid => {
        if (!valid) return
        //TODO: 提交表单
      })
    }
    const resetForm = () => {
      instance.ctx.$refs['vForm'].resetFields()
    }
    return {
      input: ref(''),
      ...toRefs(state),
      submitForm,
      resetForm
    }
  },
  methods:{
    office(){
      this.$router.push('/adm/gs-py-form')
    },
    applicantChange(){
      this.getOfficePagInfoReq();
      console.log(this.search.empName);
      console.log(this.search.deptName);
    },
    handleSizeChange(val) {
      this.paging.pageSize=val;
    },
    handleCurrentChange(val) {
      this.paging.pageNum = val;
      this.getOfficePagInfoReq();
    },



    //操作按钮
    handleEdit(row,type) {
      console.log("我是这个按钮的点击产生的内容",row);
      updateStatuswupi({
        status:type,
        id:row.id
      }).then(data=>{
        this.$response.handle({
          data:data,
          success:"已同意员工申请",
          error:"失败",
          successFn:()=>{
            this.getOfficePagInfoReq()
          }
        })
      })


    },

    handleDelete(row,type) {
      updateStatuswupi({
        status:type,
        id:row.id
      }).then(data=>{
            this.$response.handle({
              data:data,
              success:"已拒绝员工申请",
              error:"失败",
              successFn:()=>{
                this.getOfficePagInfoReq()
              }
            })
      })


    },


    handleClose(done) {
      this.$confirm('确认关闭？')
          .then((_) => {
            done()
          })
          .catch((_) => {})
    },
    getOfficePagInfoReq(){
      let params = {
        empId: this.search.empName,
        deptId: this.search.deptName,
        name:this.search.name,
        pageNum: this.paging.pageNum,
        pageSize: this.paging.pageSize
      }
      console.log(params)
      getOfficePagInfo(params).then(data=>{
        this.tableData = data.list;
        console.log('查询的信息；',data)
        this.paging.total = data.total;
      })
    },
    selectEmp(){
      selectEmp().then(data=>{
        this.options= data.data
        // console.log('员工名称',this.options)
      })

    },
    selectDept(){
      getDeptOptions(1).then(data=>{
        this.options_1 = data.data;
        // console.log('部门名称',this.options_1)
      })
    },
    init(){
      this.getOfficePagInfoReq();
    }
  },
  created() {
    this.init()
    this.selectEmp()
    this.selectDept()
  }
})
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.gs-receive{
    min-height: 99%;
}
.hhh{
    background: white;
    height: 50px;
}
.hhh .el-row{
    height: 50px;
}
.hhh .el-col{
    height: 50px;
    line-height: 50px;
}
.bbb{
    background: white;
}
.bbb .el-row{
    height: 48px;
    font-size: 14px;
}
.bbb .el-col{
    height: 100%;
    line-height: 48px;
}
.statis{
    padding: 10px 10px;
    width: 100%;
    box-sizing: border-box;
    height: 78px;
    background: rgb(239,239,244);
}
.statis .el-col{
    background: white;
    height: 100%;
}
.statis>.el-col{
    margin-right:10px;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 3px #c9b8b8;
}
.table-list{
    min-height: 460px;
    background: white;
}
.statis>.el-col>.el-row{
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.jjjj {
    font-size: 14px;
}
.kkkk {
    font-size: 16px;
}
.wwww{

}
</style>